const scaleNames = {
    c: 'Celsius',
    f: 'Fahrenheit'
}
function BoilingVerdict(props) {
    const celsius = props.celsius
    if (celsius >= 100) {
        return <p>The water will boil.</p>
    }
    return <p>Teh water will not boil.</p>
}
function toCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
    return (celsius * 9 / 5) + 32
}
function tryCovert(temperature, convert) {
    const input = parseFloat(temperature)
    if (Number.isNaN(input)) {
        return ''
    }
    const output = convert(input)
    //向上取整，并保留小数
    const rounded = Math.round(output * 1000) / 1000;
    return rounded.toString()
}
class TemperatureInput extends React.Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
    }
    handleChange(e) {
        // this.setState({ temperature: e.target.value })
        this.props.onABCChange(e.target.value)
    }
    render() {
        // const temperature = this.state.temperature
        const temperature = this.props.temperature
        const scale = this.props.scale
        return (
            < fieldset >
                <legend>
                    Enter temperature in {scaleNames[scale]}
                </legend>
                <input
                    value={temperature}
                    onChange={this.handleChange}></input>

            </fieldset >
        )
    }
}
confirm("八嘎！")
class Calculator extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            temperature: '',
            scale: 'c'
        }
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this)
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this)
    }
    handleCelsiusChange(temperaturex) {
        this.setState({ scale: 'c', temperature: temperaturex })
    }
    handleFahrenheitChange(temperaturex) {
        this.setState({ scale: 'f', temperature: temperaturex })
    }
    render() {
        const scale = this.state.scale
        const temperaturekk = this.state.temperature
        const celsius = scale === 'f' ? tryCovert(temperaturekk, toCelsius) : temperaturekk
        const fahrenheit = scale === 'c' ? tryCovert(temperaturekk, toFahrenheit) : temperaturekk
        return (
            // <div>
            //     <TemperatureInput scale='c'></TemperatureInput>
            //     <TemperatureInput scale='f'></TemperatureInput>
            // </div>
            <div>
                <TemperatureInput
                    scale='c'
                    temperature={celsius}
                    onABCChange={this.handleCelsiusChange}></TemperatureInput>
                <TemperatureInput
                    scale='f'
                    temperature={fahrenheit}
                    onABCChange={this.handleFahrenheitChange}></TemperatureInput>
                <BoilingVerdict celsius={parseFloat(celsius)}></BoilingVerdict>
            </div>
        )
    }
}
ReactDOM.render(
    <Calculator></Calculator >,
    document.getElementById('root')
)